<template>
	<section>
		<div class="header" :class="{ 'header-scroll': scrolled }">
			<b-navbar toggleable="md">
				<b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
				<b-navbar-brand>
					<router-link to="/index"><img class="logo" src="@/assets/image/logo2.png"></router-link>
				</b-navbar-brand>
				<b-collapse is-nav id="nav_collapse" class="menu-right">
					<b-navbar-nav>
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/zhinengtanshang">智能探伤</router-link>
						</b-nav-item>
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/weilaiyanjing">未来眼镜</router-link>
						</b-nav-item>
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/fuyanshijie">复眼视界</router-link>
						</b-nav-item>
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/dongzuobuzhuo">动作捕捉</router-link>
						</b-nav-item>
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/qingxiesheying">摄影建模</router-link>
						</b-nav-item>
<!-- 						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/scene/litishichuang">立体视窗</router-link>
						</b-nav-item> -->
						<b-nav-item class="ml-space">
							<router-link class="ml-link" to="/patent">专利布局</router-link>
						</b-nav-item>
					</b-navbar-nav>
					<!-- Right aligned nav items -->
					<!-- 					<b-navbar-nav class="ml-auto">
						<b-nav-item>技术</b-nav-item>
						<b-nav-item-dropdown active right>
							<template slot="button-content">
								<span>产品</span>
							</template>
							<b-dropdown-item href="#">产品产品</b-dropdown-item>
							<b-dropdown-item href="#">产品产品</b-dropdown-item>
							<b-dropdown-item href="#">产品产品</b-dropdown-item>
						</b-nav-item-dropdown>
						<b-nav-item-dropdown right>
							<template slot="button-content">
								<span>解决方案</span>
							</template>
							<b-dropdown-item href="#">解决方案</b-dropdown-item>
							<b-dropdown-item href="#">解决方案</b-dropdown-item>
							<b-dropdown-item href="#">解决方案</b-dropdown-item>
						</b-nav-item-dropdown>
						<b-nav-item>关于我</b-nav-item>
					</b-navbar-nav> -->
					<b-navbar-nav class="ml-auto menu-last">
						<a class="ml-link" href="http://www.superd.cn/brand.html">关于我们</a>
					</b-navbar-nav>
				</b-collapse>
			</b-navbar>
		</div>
	</section>
</template>
<script>
export default {
	data() {
		return {
			scrolled: false
		}
	},
	methods: {
		handleScroll() {
			this.scrolled = window.scrollY > 0;
		}
	},
	created() {
		// window.addEventListener('scroll', this.handleScroll);
	},
	destroyed() {
		window.removeEventListener('scroll', this.handleScroll);
	}
}

</script>
<style scoped lang="scss">
.layout {
	.header {
		width: 100%;
		line-height: 78px;
		background-color: hsla(0, 0%, 100%, 0); //background-color: hsla(0, 0%, 100%, .39);
		top: 0;
		z-index: 999;
		position: fixed;

		.ml-space {
			margin: 0 10px;
		}

		.ml-link {
			color: #fff;
			font-size: 12px;
			text-decoration: none;
		}

		.active {
			color: #B716DA;
		}

		.menu-right {
			margin: 0 30px;
		}

		.menu-last {
			margin-right: 10%;
		}

		a,
		span {
			color: #000;
		}

		.logo {
			margin-left: 100px;
			margin-right: 50px;
			height: 26px;
		}
	}

	@media (max-width: 600px) {
		.header {
			background-color: hsla(0, 0%, 100%, 0);

			.logo {
				margin: auto !important;
				height: 20px;
			}
		}
	}

	@media (max-width: 1200px) {
		.logo {
			margin-left: 50px;
			margin-right: 25px;
		}

		.menu-right {
			margin: 0 10px;
		}

		.menu-last {
			margin-right: 10px;
		}

		.header {
			line-height: 25px;
		}
	}




	.header-scroll {
		box-shadow: 0 5px 10px -3px #d7d7d7;
		background-color: hsla(0, 0%, 100%, 0);
		transition: .3s;
	}
}

</style>
